<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>H6 | 通过HTML及CSS模拟报纸排版</title>
	<link type="text/css" rel="stylesheet" href="style/task_6.css">
</head>
<body>
	<div class="container">
		<header>
			<div class="ife_url">
				<p>ife.baidu.com</p>
			</div>
			<p class="date">2016.03</p>
			<hr class="underline_one">
		</header>
		<section class="one">
			<div class="img_one">
				<img src="image/img_one.png">
				<div class="img_one_l"></div>
				<div class="img_one_r"></div>
			</div>
			<div class="aside">
				<hr>
				<h2>About</h2>
				<h2>Technologe</h2>
				<p>About technologe About technologe About technologe</p>
				<p class="num">700</p>
				<div class="aside_down">
					<p class="mark_1">3.2</p>
					<p class="mark_2">css</p>
					<p class="mark_3">cssssscsssscss</p>
				</div>
			</div>
		</section>
		<section class="wwh">
			<div class="what">
				<h2>what</h2>
				<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
			</div>
			<div class="when">
				<h2>when</h2>
				<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
			</div>
			<div class="how">
				<h2>how</h2>
				<p>前端前端前端前端</p>
				<p>前端前端前端</p>
				<p>前端</p>
			</div>
			<div class="w_3">
				<p>
					What-------- <span>40%</span>
				</p>
				<p>
					What-------- <span>30%</span>
				</p>
				<p>
					What-------- <span>30%</span>
				</p>
			</div>
		</section>
		<section class="article">
			<div class="art_l">
				<div class="art_l_up">
					<p class="mark_one"><span>THE</span>TECHNOLOGE <br>前端技术领域 <br></p>
					<hr class="underline">
				</div>
				<div class="art_l_down">
					<p><span>前</span>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p><img class="img_two" src="image/img_two.jpg">
					<p class="par_two">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
					<p class="par_three">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前前端端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端</p>
				</div>
			</div>
			<div class="art_r">
				<div class="art_r_up">
					<img  class="img_three" src="image/img_three.jpg">
					<div class="mark_one"></div>
					<p class="describe"><span class="des_one">前端技术</span><span class="des_two">&nbsp;&nbsp;前端技术前端技术</span></p>
				</div>	
				<div class="art_r_down">
					<p>
						<span class="triangle"></span>
						<span class="mark_one">前端前端前端前端前端前端 ...................</span>
						<span class="mark_word">前端</span>
					<br>
						<span class="triangle"></span>
						<span class="mark_one">前端前端前端前端前端前端 ...................</span>
						<span class="mark_word">前端</span>
					<br>
						<span class="triangle"></span>
						<span class="mark_one">前端前端前端前端前端前端 ...................</span>
						<span class="mark_word">前端</span>
					</p>
					<div class="art_r_down_l">
						<span>0</span>
						<div class="line">
							<p class="mark_one">ONE TWO <br> THREE FOUR FIVE</p>
							<p class="mark_two">hello world hello world <br> hello world</p>
						</div>
					</div>
					<div class="art_r_down_r">
						<p>
						<span class="mark_one">“</span>	
						world hello world
						hello world hello world
						hello world hello world
						hello world hello world
						hello world hello world
						hello world
						<span class="mark_two">”</span> 
						</p>
					</div>						
				</div>
			</div>
		</section>
		<footer>
			<p class="ife_url">ife.baidu.com</p>
		</footer>
	</div>
</body>
</html>